<template>
  <div>
    <!--  面包屑-->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="row-play">
      <el-card style="width: 500px" class="row-play-p">
        <el-radio-group v-model="searchForm1.time" style="margin-bottom: 10px" @change="getChart1">
          <el-radio-button :label="2" value="2">近七天</el-radio-button>
          <el-radio-button :label="3" value="3">近30天</el-radio-button>
          <el-radio-button :label="4" value="4">本周</el-radio-button>
          <el-radio-button :label="5" value="5">本月</el-radio-button>
        </el-radio-group>
        <div ref="chart1" style="width: 100%;height: 376px"></div>
      </el-card>
      <el-card style="width: 500px" class="row-play-p">
        <el-radio-group v-model="searchForm2.time" style="margin-bottom: 10px" @change="getChart2">
          <el-radio-button :label="2" value="2">近七天</el-radio-button>
          <el-radio-button :label="3" value="3">近30天</el-radio-button>
          <el-radio-button :label="4" value="4">本周</el-radio-button>
          <el-radio-button :label="5" value="5">本月</el-radio-button>
        </el-radio-group>
        <div ref="chart2" style="width: 100%;height: 376px"></div>
      </el-card>

      <el-button style="margin-left: 50px; margin-bottom: 450px" type="info" icon="el-icon-upload2" @click="exportNum">
        数据导出
      </el-button>
    </div>
    <div class="row-play">
      <el-card style="width: 500px" class="row-play-p">
        <el-radio-group v-model="searchForm3.time" style="margin-bottom: 10px" @change="getChart3">
          <el-radio-button :label="2" value="2">近七天</el-radio-button>
          <el-radio-button :label="3" value="3">近30天</el-radio-button>
          <el-radio-button :label="4" value="4">本周</el-radio-button>
          <el-radio-button :label="5" value="5">本月</el-radio-button>
        </el-radio-group>
        <div ref="chart3" style="width: 100%;height: 376px"></div>
      </el-card>
      <el-card style="width: 500px" class="row-play-p">
        <el-radio-group v-model="searchForm4.time" style="margin-bottom: 10px" @change="getChart4">
          <el-radio-button :label="2" value="2">近七天</el-radio-button>
          <el-radio-button :label="3" value=3>近30天</el-radio-button>
          <el-radio-button :label="4" value="4">本周</el-radio-button>
          <el-radio-button :label="5" value="5">本月</el-radio-button>
        </el-radio-group>
        <div ref="chart4" style="width: 100%;height: 376px"></div>
      </el-card>
    </div>
  </div>
</template>

<script>

import axios from "axios";

require('echarts/theme/macarons');

export default {
  data() {
    return {
      searchForm1: {
        time: 2,
        startDay: null,
        endDay: null
      },
      searchForm2: {
        time: 2,
        startDay: null,
        endDay: null
      },
      searchForm3: {
        time: 2,
        startDay: null,
        endDay: null
      },
      searchForm4: {
        time: 2,
        startDay: null,
        endDay: null
      },
      chart1: {//功能研发榜
        deviceName: ['', '', '', '', '', '', '', '', '', ''],
        functionCount: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
      },
      chart2: {//骨干员工榜
        updateName: ['', '', '', '', '', '', '', '', '', ''],
        updateCount: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
      },
      chart3: {//维修单完成情况
        validRepairCount: [],
        totalRepairCount: [],
        validRepairRate: [],
        dateLine: []
      },
      chart4: {//故障排行榜
        functionName: ['123', '', '', '', '', '', '', '', '', ''],
        deviceName: ['', '', '', '', '', '', '', '', '', ''],
        categoryName: ['', '', '', '', '', '', '', '', '', ''],
        functionCount: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
      },
      option :{
        title: {
          text: '维修单完成情况'
        },
        xAxis: {
          data:[]
        },
        yAxis: {},
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        legend: {},
        tooltip: {
          trigger: 'axis',
          formatter: (p) => {
            return `日期：${this.chart3.dateLine[p[0].dataIndex]}<br/>完成单数: ${this.chart3.validRepairCount[p[0].dataIndex]}<br/>总单数：${this.chart3.totalRepairCount[p[0].dataIndex]}<br/>完成率：${this.chart3.validRepairRate[p[0].dataIndex]}%`;
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        series: [
          {
            name: '已完成',
            data: [],
            type: 'line',
            // smooth: true,
            areaStyle: {}
          },
          {
            name: '总量',
            data: [],
            type: 'line',
            // smooth: true,
            areaStyle: {}
          }
        ],
        // animationDuration: 1000,
      }
    }
  },
  mounted() {
    this.getDay(this.searchForm1);
    this.getDay(this.searchForm2);
    this.getDay(this.searchForm3);
    this.getDay(this.searchForm4);
    this.getChart1();
    this.getChart2();
    this.getChart3();
    this.getChart4();
    // this.getEchartData2();
    // this.getEchartData3();
    // this.getEchartData1();
    // this.getEchartData4();
  },
  methods: {
    exportNum() {
      axios({
        url: '/statistics/export',
        method: 'GET',
        responseType: 'blob' // 设置响应类型为二进制流
      })
          .then((response) => {
            // 创建一个Blob对象，并指定文件的MIME类型
            const blob = new Blob([response.data], {type: response.headers['content-type']});

            // 创建一个链接用于下载文件
            const downloadUrl = URL.createObjectURL(blob);

            // 创建一个a标签并设置相关属性
            const link = document.createElement('a');
            link.href = downloadUrl;
            link.download = '运营报表'; // 设置下载文件的名称

            // 模拟点击下载链接进行文件下载
            link.click();

            // 释放URL对象
            URL.revokeObjectURL(link.href);
          })
          .catch((error) => {
            console.error(error);
          });
    },
    async getChart1() {//功能研发榜
      console.log(this.searchForm1.startDay)
      this.getDay(this.searchForm1)
      const {data: res} = await this.$http.get("/statistics/device", {
        params: {
          beginTime: this.searchForm1.startDay,
          endTime: this.searchForm1.endDay
        }
      });
      if (res.code === 0) {
        return this.$message.error("获取功能研发榜失败");
      }
      this.chart1.deviceName = res.data.deviceName;
      this.chart1.functionCount = res.data.functionCount;
      this.getEchartData1();
    },
    async getChart2() {//骨干员工榜
      this.getDay(this.searchForm2)
      const {data: res} = await this.$http.get("/statistics/employee", {
        params: {
          beginTime: this.searchForm2.startDay,
          endTime: this.searchForm2.endDay
        }
      });
      if (res.code === 0) {
        return this.$message.error("获取骨干员工榜失败");
      }
      this.chart2.updateCount = res.data.updateCount;
      this.chart2.updateName = res.data.updateName;
      this.getEchartData2();
    },
    async getChart3() {//维修单完成情况
      this.option.series[0].data=[]
      this.option.series[1].data=[]
      this.option.xAxis.data=[]
      this.getDay(this.searchForm3)
      const {data: res} = await this.$http.get("/statistics/repairRate", {
        params: {
          beginTime: this.searchForm3.startDay,
          endTime: this.searchForm3.endDay
        }
      });
      if (res.code === 0) {
        return this.$message.error("获取维修单完成情况失败");
      }
      res.data.validRepairCount.forEach(e=>{
        this.option.series[0].data.push(e);
      });
      this.chart3.validRepairCount = res.data.validRepairCount;
      res.data.totalRepairCount.forEach(e=>{
        this.option.series[1].data.push(e);
      });
      this.chart3.totalRepairCount = res.data.totalRepairCount;
      res.data.dateLine.forEach(e=>{
        this.option.xAxis.data.push(e)
      });
      this.chart3.dateLine=res.data.dateLine;
      this.chart3.validRepairRate = res.data.validRepairRate;
      this.getEchartData3();
    },
    async getChart4() {//故障排行榜
      this.getDay(this.searchForm4)
      const {data: res} = await this.$http.get("/statistics/repairNum", {
        params: {
          beginTime: this.searchForm4.startDay,
          endTime: this.searchForm4.endDay
        }
      });
      if (res.code === 0) {
        return this.$message.error("获取故障排行榜失败");
      }
      this.chart4.categoryName = res.data.categoryName;
      this.chart4.deviceName = res.data.deviceName;
      this.chart4.functionCount = res.data.functionCount;
      this.chart4.functionName = res.data.functionName;
      this.getEchartData4();
    },
    formatDate(date) {
      var year = date.getFullYear();
      var month = ("0" + (date.getMonth() + 1)).slice(-2);
      var day = ("0" + date.getDate()).slice(-2);
      var hours = ("0" + date.getHours()).slice(-2);
      var minutes = ("0" + date.getMinutes()).slice(-2);
      var seconds = ("0" + date.getSeconds()).slice(-2);

      return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
    },
    getDay(form) {
      console.log(form.time)
      var start;
      var end;
      var currentDate = new Date();
      if (form.time === 5) {
        start = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
        var nextMonthStart = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1);
        end = new Date(nextMonthStart.getTime());
      } else if (form.time === 2) {
        let currentTimeStamp = currentDate.getTime();
        let oneDayMilliseconds = 24 * 60 * 60 * 1000;
        start = new Date(currentTimeStamp - (7 * oneDayMilliseconds));
        end = new Date(currentTimeStamp);
      } else if (form.time === 3) {
        let currentTimeStamp = currentDate.getTime();
        let oneDayMilliseconds = 24 * 60 * 60 * 1000;
        start = new Date(currentTimeStamp - (30 * oneDayMilliseconds));
        end = new Date(currentTimeStamp);
      } else if (form.time === 4) {
        var currentDayOfWeek = currentDate.getDay();
        start = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate() - currentDayOfWeek);
        end = new Date(start.getTime() + (7 * 24 * 60 * 60 * 1000));
      }
      form.startDay = this.formatDate(start);
      form.endDay = this.formatDate(end);
    },
    getEchartData2() {
      console.log(this.chart2.updateName)
      console.log(this.chart2.updateCount)
      const chart2 = this.$refs.chart2;
      if (chart2) {
        var myChart = this.$echarts.init(chart2, 'macarons');
        const option = {
          title: {
            text: '骨干员工榜'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          tooltip: {
            trigger: "item",
            formatter: (p) => {
              return `修改次数: ${this.chart2.updateCount[p.seriesIndex]}<br/>员工名：${this.chart2.updateName[p.seriesIndex]}`;
            }
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          dataset: {
            // 提供一份数据。
            source: [
              ['', '', '', '', '', '', '', '', '', '', ''],
              ['', this.chart2.updateCount[0],
                this.chart2.updateCount[1],
                this.chart2.updateCount[2],
                this.chart2.updateCount[3],
                this.chart2.updateCount[4],
                this.chart2.updateCount[5],
                this.chart2.updateCount[6],
                this.chart2.updateCount[7],
                this.chart2.updateCount[8],
                this.chart2.updateCount[9]]
            ]
          },
          // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
          xAxis: {},
          // 声明一个 Y 轴，数值轴。
          yAxis: {type: 'category'},
          // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
          series: [
            {
              name: this.chart2.updateName[0],
              type: 'bar',
              label: {
                show: true,
                position: 'insideLeft',
                formatter: function (params) {
                  return params.seriesName;  // 使用 params.seriesName 来获取 series 的 name 属性值
                }
              },
              itemStyle: {
                opacity: this.chart2.updateCount[0] !== 0 ? 1 : 0  // 需要隐藏的列设置为 0
              }
            },
            {
              name: this.chart2.updateName[1],
              type: 'bar',
              label: {
                show: true,
                position: 'insideLeft',
                formatter: function (params) {
                  return params.seriesName;  // 使用 params.seriesName 来获取 series 的 name 属性值
                }
              },
              itemStyle: {
                opacity: this.chart2.updateCount[1] !== 0 ? 1 : 0 // 需要隐藏的列设置为 0
              }
            },
            {
              name: this.chart2.updateName[2],
              type: 'bar',
              label: {
                show: true,
                position: 'insideLeft',
                formatter: function (params) {
                  return params.seriesName;  // 使用 params.seriesName 来获取 series 的 name 属性值
                }
              },
              itemStyle: {
                opacity: this.chart2.updateCount[2] !== 0 ? 1 : 0   // 需要隐藏的列设置为 0
              }
            },
            {
              name: this.chart2.updateName[3],
              type: 'bar',
              label: {
                show: true,
                position: 'insideLeft',
                formatter: function (params) {
                  return params.seriesName;  // 使用 params.seriesName 来获取 series 的 name 属性值
                }
              },
              itemStyle: {
                opacity: this.chart2.updateCount[3] !== 0 ? 1 : 0  // 需要隐藏的列设置为 0
              }
            },
            {
              name: this.chart2.updateName[4],
              type: 'bar',
              label: {
                show: true,
                position: 'insideLeft',
                formatter: function (params) {
                  return params.seriesName;  // 使用 params.seriesName 来获取 series 的 name 属性值
                }
              },
              itemStyle: {
                opacity: this.chart2.updateCount[4] !== 0 ? 1 : 0   // 需要隐藏的列设置为 0
              }
            },
            {
              name: this.chart2.updateName[5],
              type: 'bar',
              label: {
                show: true,
                position: 'insideLeft',
                formatter: function (params) {
                  return params.seriesName;  // 使用 params.seriesName 来获取 series 的 name 属性值
                }
              },
              itemStyle: {
                opacity: this.chart2.updateCount[5] !== 0 ? 1 : 0  // 需要隐藏的列设置为 0
              }
            },
            {
              name: this.chart2.updateName[6],
              type: 'bar',
              label: {
                show: true,
                position: 'insideLeft',
                formatter: function (params) {
                  return params.seriesName;  // 使用 params.seriesName 来获取 series 的 name 属性值
                }
              },
              itemStyle: {
                opacity: this.chart2.updateCount[6] !== 0 ? 1 : 0   // 需要隐藏的列设置为 0
              }
            },
            {
              name: this.chart2.updateName[7],
              type: 'bar',
              label: {
                show: true,
                position: 'insideLeft',
                formatter: function (params) {
                  return params.seriesName;  // 使用 params.seriesName 来获取 series 的 name 属性值
                }
              },
              itemStyle: {
                opacity: this.chart2.updateCount[7] !== 0 ? 1 : 0   // 需要隐藏的列设置为 0
              }
            },
            {
              name: this.chart2.updateName[8],
              type: 'bar',
              label: {
                show: true,
                position: 'insideLeft',
                formatter: function (params) {
                  return params.seriesName;  // 使用 params.seriesName 来获取 series 的 name 属性值
                }
              },
              itemStyle: {
                opacity: this.chart2.updateCount[8] !== 0 ? 1 : 0   // 需要隐藏的列设置为 0
              }
            },
            {
              name: this.chart2.updateName[9],
              type: 'bar',
              label: {
                show: true,
                position: 'insideLeft',
                formatter: function (params) {
                  return params.seriesName;  // 使用 params.seriesName 来获取 series 的 name 属性值
                }
              },
              itemStyle: {
                opacity: this.chart2.updateCount[9] !== 0 ? 1 : 0   // 需要隐藏的列设置为 0
              }
            },
          ]
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize()
        })
      }
      this.$on('hook:destroyed', () => {
        window.removeEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
    getEchartData1() {
      const chart1 = this.$refs.chart1;
      if (chart1) {
        var myChart = this.$echarts.init(chart1, 'macarons');
        const option = {
          title: {
            text: '功能研发榜'
          },
          tooltip: {
            trigger: "item",
            formatter: (p) => {
              return `个数: ${this.chart1.functionCount[p.seriesIndex]}<br/>设备名：${this.chart1.deviceName[p.seriesIndex]}`;
            }
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          dataset: {
            // 提供一份数据。
            source: [
              ['', '', '', '', '', '', '', '', '', '', ''],
              ['', this.chart1.functionCount[0],
                this.chart1.functionCount[1],
                this.chart1.functionCount[2],
                this.chart1.functionCount[3],
                this.chart1.functionCount[4],
                this.chart1.functionCount[5],
                this.chart1.functionCount[6],
                this.chart1.functionCount[7],
                this.chart1.functionCount[8],
                this.chart1.functionCount[9]]
            ]
          },
          // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
          xAxis: {},
          // 声明一个 Y 轴，数值轴。
          yAxis: {
            type: 'category'
          },
          // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
          series: [
            {
              name: this.chart1.deviceName[0],
              type: 'bar',
              label: {
                show: true,
                position: 'insideLeft',
                formatter: function (params) {
                  return params.seriesName;  // 使用 params.seriesName 来获取 series 的 name 属性值
                }
              },
              itemStyle: {
                opacity: this.chart1.functionCount[0] !== 0 ? 1 : 0  // 需要隐藏的列设置为 0
              }
            },
            {
              name: this.chart1.deviceName[1],
              type: 'bar',
              label: {
                show: true,
                position: 'insideLeft',
                formatter: function (params) {
                  return params.seriesName;  // 使用 params.seriesName 来获取 series 的 name 属性值
                }
              },
              itemStyle: {
                opacity: this.chart1.functionCount[1] !== 0 ? 1 : 0  // 需要隐藏的列设置为 0
              }
            },
            {
              name: this.chart1.deviceName[2],
              type: 'bar',
              label: {
                show: true,
                position: 'insideLeft',
                formatter: function (params) {
                  return params.seriesName;  // 使用 params.seriesName 来获取 series 的 name 属性值
                }
              },
              itemStyle: {
                opacity: this.chart1.functionCount[2] !== 0 ? 1 : 0   // 需要隐藏的列设置为 0
              }
            },
            {
              name: this.chart1.deviceName[3],
              type: 'bar',
              label: {
                show: true,
                position: 'insideLeft',
                formatter: function (params) {
                  return params.seriesName;  // 使用 params.seriesName 来获取 series 的 name 属性值
                }
              },
              itemStyle: {
                opacity: this.chart1.functionCount[3] !== 0 ? 1 : 0  // 需要隐藏的列设置为 0
              }
            },
            {
              name: this.chart1.deviceName[4],
              type: 'bar',
              label: {
                show: true,
                position: 'insideLeft',
                formatter: function (params) {
                  return params.seriesName;  // 使用 params.seriesName 来获取 series 的 name 属性值
                }
              },
              itemStyle: {
                opacity: this.chart1.functionCount[4] !== 0 ? 1 : 0  // 需要隐藏的列设置为 0
              }
            },
            {
              name: this.chart1.deviceName[5],
              type: 'bar',
              label: {
                show: true,
                position: 'insideLeft',
                formatter: function (params) {
                  return params.seriesName;  // 使用 params.seriesName 来获取 series 的 name 属性值
                }
              },
              itemStyle: {
                opacity: this.chart1.functionCount[5] !== 0 ? 1 : 0 // 需要隐藏的列设置为 0
              }
            },
            {
              name: this.chart1.deviceName[6],
              type: 'bar',
              label: {
                show: true,
                position: 'insideLeft',
                formatter: function (params) {
                  return params.seriesName;  // 使用 params.seriesName 来获取 series 的 name 属性值
                }
              },
              itemStyle: {
                opacity: this.chart1.functionCount[6] !== 0 ? 1 : 0  // 需要隐藏的列设置为 0
              }
            },
            {
              name: this.chart1.deviceName[7],
              type: 'bar',
              label: {
                show: true,
                position: 'insideLeft',
                formatter: function (params) {
                  return params.seriesName;  // 使用 params.seriesName 来获取 series 的 name 属性值
                }
              },
              itemStyle: {
                opacity: this.chart1.functionCount[7] !== 0 ? 1 : 0  // 需要隐藏的列设置为 0
              }
            },
            {
              name: this.chart1.deviceName[8],
              type: 'bar',
              label: {
                show: true,
                position: 'insideLeft',
                formatter: function (params) {
                  return params.seriesName;  // 使用 params.seriesName 来获取 series 的 name 属性值
                }
              },
              itemStyle: {
                opacity: this.chart1.functionCount[8] !== 0 ? 1 : 0  // 需要隐藏的列设置为 0
              }
            },
            {
              name: this.chart1.deviceName[9],
              type: 'bar',
              label: {
                show: true,
                position: 'insideLeft',
                formatter: function (params) {
                  return params.seriesName;  // 使用 params.seriesName 来获取 series 的 name 属性值
                }
              },
              itemStyle: {
                opacity: this.chart1.functionCount[9] !== 0 ? 1 : 0  // 需要隐藏的列设置为 0
              }
            },
          ]
        };
        myChart.setOption(option);
        // setInterval(function () {
        //
        // }, 3000);
        window.addEventListener("resize", function () {
          myChart.resize()
        })
      }
      this.$on('hook:destroyed', () => {
        window.removeEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
    getEchartData4() {
      const chart4 = this.$refs.chart4;
      if (chart4) {
        var myChart = this.$echarts.init(chart4, 'macarons');
        const option = {
          title: {
            text: '故障排行榜'
          },
          // legend: {},
          tooltip: {
            trigger: "item",
            formatter: (p) => {
              return `报单数: ${this.chart4.functionCount[p.seriesIndex]}<br/>功能名：${this.chart4.functionName[p.seriesIndex]}<br/>设备名：${this.chart4.deviceName[p.seriesIndex]}<br/>大类：${this.chart4.categoryName[p.seriesIndex]}`;
            }
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          dataset: {
            // 提供一份数据。
            source: [
              ['', '', '', '', '', '', '', '', '', '', ''],
              ['', this.chart4.functionCount[0],
                this.chart4.functionCount[1],
                this.chart4.functionCount[2],
                this.chart4.functionCount[3],
                this.chart4.functionCount[4],
                this.chart4.functionCount[5],
                this.chart4.functionCount[6],
                this.chart4.functionCount[7],
                this.chart4.functionCount[8],
                this.chart4.functionCount[9]]
            ]
          },
          // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
          xAxis: {},
          // 声明一个 Y 轴，数值轴。
          yAxis: {type: 'category'},
          // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
          series: [{
            name: this.chart4.functionName[0],
            type: 'bar',
            label: {
              show: true,
              position: 'insideLeft',
              formatter: function (params) {
                return params.seriesName;  // 使用 params.seriesName 来获取 series 的 name 属性值
              }
            },
            itemStyle: {
              opacity: this.chart4.functionCount[0] !== 0 ? 1 : 0  // 需要隐藏的列设置为 0
            }
          },
            {
              name: this.chart4.functionName[1],
              type: 'bar',
              label: {
                show: true,
                position: 'insideLeft',
                formatter: function (params) {
                  return params.seriesName;  // 使用 params.seriesName 来获取 series 的 name 属性值
                }
              },
              itemStyle: {
                opacity: this.chart4.functionCount[1] !== 0 ? 1 : 0  // 需要隐藏的列设置为 0
              }
            },
            {
              name: this.chart4.functionName[2],
              type: 'bar',
              label: {
                show: true,
                position: 'insideLeft',
                formatter: function (params) {
                  return params.seriesName;  // 使用 params.seriesName 来获取 series 的 name 属性值
                }
              },
              itemStyle: {
                opacity: this.chart4.functionCount[2] !== 0 ? 1 : 0   // 需要隐藏的列设置为 0
              }
            },
            {
              name: this.chart4.functionName[3],
              type: 'bar',
              label: {
                show: true,
                position: 'insideLeft',
                formatter: function (params) {
                  return params.seriesName;  // 使用 params.seriesName 来获取 series 的 name 属性值
                }
              },
              itemStyle: {
                opacity: this.chart4.functionCount[3] !== 0 ? 1 : 0  // 需要隐藏的列设置为 0
              }
            },
            {
              name: this.chart4.functionName[4],
              type: 'bar',
              label: {
                show: true,
                position: 'insideLeft',
                formatter: function (params) {
                  return params.seriesName;  // 使用 params.seriesName 来获取 series 的 name 属性值
                }
              },
              itemStyle: {
                opacity: this.chart4.functionCount[4] !== 0 ? 1 : 0  // 需要隐藏的列设置为 0
              }
            },
            {
              name: this.chart4.functionName[5],
              type: 'bar',
              label: {
                show: true,
                position: 'insideLeft',
                formatter: function (params) {
                  return params.seriesName;  // 使用 params.seriesName 来获取 series 的 name 属性值
                }
              },
              itemStyle: {
                opacity: this.chart4.functionCount[5] !== 0 ? 1 : 0 // 需要隐藏的列设置为 0
              }
            },
            {
              name: this.chart4.functionName[6],
              type: 'bar',
              label: {
                show: true,
                position: 'insideLeft',
                formatter: function (params) {
                  return params.seriesName;  // 使用 params.seriesName 来获取 series 的 name 属性值
                }
              },
              itemStyle: {
                opacity: this.chart4.functionCount[6] !== 0 ? 1 : 0  // 需要隐藏的列设置为 0
              }
            },
            {
              name: this.chart4.functionName[7],
              type: 'bar',
              label: {
                show: true,
                position: 'insideLeft',
                formatter: function (params) {
                  return params.seriesName;  // 使用 params.seriesName 来获取 series 的 name 属性值
                }
              },
              itemStyle: {
                opacity: this.chart4.functionCount[7] !== 0 ? 1 : 0  // 需要隐藏的列设置为 0
              }
            },
            {
              name: this.chart4.functionName[8],
              type: 'bar',
              label: {
                show: true,
                position: 'insideLeft',
                formatter: function (params) {
                  return params.seriesName;  // 使用 params.seriesName 来获取 series 的 name 属性值
                }
              },
              itemStyle: {
                opacity: this.chart4.functionCount[8] !== 0 ? 1 : 0  // 需要隐藏的列设置为 0
              }
            },
            {
              name: this.chart4.functionName[9],
              type: 'bar',
              label: {
                show: true,
                position: 'insideLeft',
                formatter: function (params) {
                  return params.seriesName;  // 使用 params.seriesName 来获取 series 的 name 属性值
                }
              },
              itemStyle: {
                opacity: this.chart4.functionCount[9] !== 0 ? 1 : 0  // 需要隐藏的列设置为 0
              }
            },
          ]
        };
        myChart.setOption(option);
        // setInterval(function () {
        //
        // }, 3000);
        window.addEventListener("resize", function () {
          myChart.resize()
        })
      }
      this.$on('hook:destroyed', () => {
        window.removeEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
    getEchartData3() {
      const chart3 = this.$refs.chart3;
      if (chart3) {
        var myChart = this.$echarts.init(chart3, 'macarons');
        myChart.setOption(this.option)
        window.addEventListener("resize", function () {
          myChart.resize()
        })
        myChart.refresh();
      }
      this.$on('hook:destroyed', () => {
        window.removeEventListener("resize", function () {
          myChart.resize();
        });
      });
    }
  },
  watch: {},
  created() {
  }
}
</script>

<style scoped lang="less">
.row-play {
  display: flex;
  align-items: center;

  .row-play-play {
    width: 200px;
    margin-right: 10px;
  }

  .row-play-p {
    margin-right: 40px;
    margin-bottom: 40px;
  }
}

/deep/ .el-radio-button:first-child .el-radio-button__inner {
  border-radius: 1px
}

/deep/ .el-radio-button:last-child .el-radio-button__inner {
  border-radius: 1px;
}
</style>